<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <title>登录</title>
  <link rel="stylesheet" href="static/css/animate.css">
  <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/webbase.css"/>

  <script src="static/js/jquery.min.js"></script>
  <script src="static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <script src="static/js/wow.min.js"></script>
  <script src="static/js/jquery.cookie.js"></script>
  <script type="text/javascript"> new WOW().init(); </script>
  <style type="text/css">
    .login-back {
      height: 100%;
      padding-left: 5%;
      background: url("static/images/login/login-background.jpg") no-repeat no-repeat;
    }

    nav.navbar.navbar-default {
      padding: 8px 0px;
      background: white;
      margin-bottom: 1%;
    }

    #btnLogin {
      margin-top: 30px;
      width: 100%;
      height: 35px;
      line-height: 18px;
      color: #fff;
      background-color: #2b8cc5;
    }

    #msg {
      text-align: center;
      margin-bottom: 10px;
      height: 33px;
      line-height: 33px;
      margin-top: -5px;
      font-size: 11px;
      font-weight: bold;
      border-radius: 8px;
      display: none;
      border: solid 1px #ffc2b3;
      background: #ffd1ca;
      color: red;
    }
  </style>
</head>
<body>
<!-- Head -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header pull-left" style="margin-top: 3px;">
      <a href="index.html">
        <img src="img/Logo.png" style="margin-left: 30px;">
      </a>
    </div>
  </div><!-- /.container-->
</nav>

<!-- content -->
<div class="login-content" style="height: 480px;">
  <div class="col-md-1 hidden-sm hidden-xs"></div>
  <div class="col-md-7 col-sm-6 login-back hidden-sm hidden-xs"></div>
  <div class="container col-md-3  col-sm-5 wow fadeInRight" style="margin-top: 3%; margin-left: 3%">
    <div class="panel panel-default">
      <div class="panel-body" style="padding: 35px 20px 20px;">

        <div id="msg">
          <span></span>
        </div>

        <form method="post" id="loginForm">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" name="namePhoneEmail" autocomplete="off" placeholder="用户名/邮箱/手机号">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" autocomplete="off" placeholder="密码">
          </div>

          <!-- 验证码  -->
          <div class="form-group">
            <div class="col-md-7 col-sm-7 col-xs-7" style="margin-left: -15px;">
              <label for="verification">验证码</label>
              <input type="text" class="form-control" id="verification" name="verification" autocomplete="off" placeholder="验证码">
            </div>
            <div class="col-md-5 col-sm-5 col-xs-5" style=" padding: 0px">
              <a href="javascript:void(0);" onclick="VerificationCode()">
                <img id="randCodeImage" alt="验证码" style="margin-top: 10px; width:120px; height:45px"/>
              </a>
            </div>
          </div>
          <button type="button" class="btn btn-default" id="btnLogin">登&nbsp;&nbsp;录</button>
        </form>

        <div style="background-color: #f6f6f6; text-align: center; padding: 5px 0px;">
          没有帐号？<a href="register.html">注册</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-1  col-sm-2"></div>
</div>
<!--页面底部-->
<div class="clearfix footer hidden-xs hidden-sm">
  <div class="py-container">
    <div class="footlink">
      <div class="Mod-copyright">
        <ul class="helpLink">
          <li>关于我们<span class="space"></span></li>
          <li>联系我们<span class="space"></span></li>
          <li>关于我们<span class="space"></span></li>
          <li>商家入驻<span class="space"></span></li>
          <li>营销中心<span class="space"></span></li>
          <li>友情链接<span class="space"></span></li>
          <li>关于我们<span class="space"></span></li>
          <li>营销中心<span class="space"></span></li>
          <li>友情链接<span class="space"></span></li>
          <li>关于我们</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!--页面底部END-->
</body>

<script type="text/javascript">

  // 进入此页面先生成一个随机数，作为验证码redis的key
  var yzmRedisKey = Math.floor(Math.random() * Math.pow(10, 8));

  /**
   *  验证码刷新
   */
  function VerificationCode() {
    var rad = Math.floor(Math.random() * Math.pow(10, 8));
    //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接
    $("#randCodeImage").attr("src", "http://localhost:3001/generate?uuuy=" + rad + "&yzmRedisKey=" + yzmRedisKey);
  }

  $(function () {
    var rad = Math.floor(Math.random() * Math.pow(10, 8));
    //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接
    $("#randCodeImage").attr("src", "http://localhost:3001/generate?uuuy=" + rad + "&yzmRedisKey=" + yzmRedisKey);

    /**
     * 点击登录
     */
    $("#btnLogin").click(function () {
      var username = $.trim($("#username").val());
      var password = $.trim($("#password").val());
      var verification = $.trim($("#verification").val());
      $("#msg").hide(300);

      //验证
      if (username.length === 0 || password.length === 0 || verification.length === 0) {
        $("#msg span").text("请正确填写");
        $("#msg").show(300);
        return;
      }

      var ajaxData = {
        "namePhoneEmail": username,
        "password": password,
        "verification": verification,
        "yzmRedisKey": yzmRedisKey
      };

      console.info(JSON.stringify(ajaxData));

      /* 登录ajax. */
      $.ajax({
        url: "http://localhost:3001/login",
        type: "POST",
        data: JSON.stringify(ajaxData),
        contentType: 'application/json',
        success: function (data) {
          var rad = Math.floor(Math.random() * Math.pow(10, 8));
          if (!data.success) {
            $("#msg span").text(data.errorMsg);
            $("#msg").show(300);

            //清空验证码输入框内容
            $("#verification").val(""); // 清空并获得焦点
            if (data.status == 201) {
              $("#verification").focus();
            }
            //重新获取验证码
            $("#randCodeImage").attr("src", "http://localhost:3001/generate?uuuy=" + rad + "&yzmRedisKey=" + yzmRedisKey);
          } else {
            // 将token存到cookie中
            $.cookie("token", data.data.token, { expires: 7 });
            location.href = "index.html";
          }
        }
      });
    });
  })
</script>
</html>